<{extend name="Public:public0" /}>

<{block name="title"}>目录及配置<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-vuecli" /}><{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar components-guide">
	
<h1>目录及配置</h1>	

<h2 id="import">
	<a href="#import" class="headerlink" title="import" data-scroll="">路径配置import</a>
</h2>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="com">//&nbsp;路径配置在&nbsp;build/webpack.base.conf.js</span></li><li class="L1"><span class="pln">resolve</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;extensions</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">[</span><span class="str">'.js'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="str">'.vue'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="str">'.json'</span><span class="pun">],</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">alias</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="str">'vue$'</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="str">'vue/dist/vue.esm.js'</span><span class="pun">,</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="str">'@'</span><span class="pun">:</span><span class="pln">&nbsp;resolve</span><span class="pun">(</span><span class="str">'src'</span><span class="pun">),</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="str">'@styles'</span><span class="pun">:</span><span class="pln">&nbsp;resolve</span><span class="pun">(</span><span class="str">'src/assets/styles'</span><span class="pun">),</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="str">'@common'</span><span class="pun">:</span><span class="pln">&nbsp;resolve</span><span class="pun">(</span><span class="str">'src/common'</span><span class="pun">),</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L9"><span class="pun">},</span></li><li class="L0"><span class="pln">&nbsp;</span></li><li class="L1"><span class="com">//&nbsp;&lt;script&gt;import会如下解析:</span></li><li class="L2"><span class="kwd">import</span><span class="pln">&nbsp;</span><span class="str">'styles/reset.css'</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;import&nbsp;'@/assets/styles/reset.css'</span></li><li class="L3"><span class="kwd">import</span><span class="pln">&nbsp;</span><span class="str">'styles/border.css'</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;import&nbsp;'@/assets/styles/border.css'</span></li><li class="L4"><span class="com">//&nbsp;&lt;style&gt;import会如下解析:</span></li><li class="L5"><span class="lit">@import</span><span class="pln">&nbsp;</span><span class="str">'~@styles/varibles.styl'</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;@import&nbsp;'~@/assets/styles/varibles.styl'</span></li><li class="L6"><span class="lit">@import</span><span class="pln">&nbsp;</span><span class="str">'~@styles/mixins.styl'</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;@import&nbsp;'~@/assets/styles/mixins.styl'</span></li></ol></code>

<br><br>


	
	
<h2 id="总体框架">
	<a href="#总体框架" class="headerlink" title="总体框架" data-scroll="">总体框架</a>
</h2>	
<div><img src="__ROOT__/images/mulujiegou/01.zongti.jpg" ></div>
<br><br>

<h2 id="文件结构细分">
	<a href="#文件结构细分" class="headerlink" title="文件结构细分" data-scroll="">文件结构细分</a>
</h2>

<h3 id="build">
	<a href="#build" class="headerlink" title="build" data-scroll="">build - [webpack配置]</a>
</h3>
<div>build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。</div>
<br>
<div><img src="__ROOT__/images/mulujiegou/02.build.jpg" ></div>
<br>

<h3 id="config">
	<a href="#config" class="headerlink" title="config" data-scroll="">config - [vue项目配置]</a>
</h3>
<div><img src="__ROOT__/images/mulujiegou/03.config.jpg" ></div>
<br>

<h3 id="node_modules">
	<a href="#node_modules" class="headerlink" title="node_modules" data-scroll="">node_modules - [依赖包]</a>
</h3>
<div>
node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。<br>
在两种情况下我们会自己去安装依赖：<br>
（1）项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）<br>
（2）安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件)<br>
注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4 <br>
</div>
<br>

<h3 id="router">
	<a href="#router" class="headerlink" title="router" data-scroll="">router - [路由配置]</a>
</h3>
<div>router文件夹下，有一个index.js，即为路由配置文件</div><br>
<div><img src="__ROOT__/images/mulujiegou/04.router.jpg" ></div>

</div>

<{/block}>
